import './index.less';
import { ChangeEvent, ChangeEventHandler, FormEvent, useState } from 'react';

function Login() {
    let [username, setUsername] = useState('');
    let [password, setPassword] = useState('');
    const handleUsername: ChangeEventHandler<HTMLInputElement> = (e: ChangeEvent<HTMLInputElement>) => {
        setUsername(e.target.value);
    };
    const handlePassword: ChangeEventHandler<HTMLInputElement> = (e: ChangeEvent<HTMLInputElement>) => {
        setPassword(e.target.value);
    };
    // 登陆函数
    const doLogin = (e: FormEvent<HTMLFormElement>) => {
        // 阻止表单默认提交行为
        e.preventDefault();
        console.log('login');
    };
    const toRegister = (e: React.MouseEvent) => {
        e.preventDefault();
        console.log(123);
    };
    const toResetPwd = (e: React.MouseEvent) => {};
    return (
        <div className="login-page">
            <form className="login-box" onSubmit={doLogin}>
                <div className="login-title">登录</div>
                <div className="input-box">
                    <div className="login-item">
                        <i className="iconfont icon-nickname"></i>
                        <input type="text" value={username} onChange={handleUsername} placeholder="请输入用户名或邮箱" />
                    </div>
                    <div className="login-item">
                        <i className="iconfont icon-lock"></i>
                        <input type="password" value={password} onChange={handlePassword} placeholder="请输入密码" />
                    </div>
                    <div className="assist-btns">
                        <div className="btn-register cursor-point" onClick={toRegister}>
                            账号注册
                        </div>
                        <div className="btn-forget-pwd cursor-point" onClick={toResetPwd}>
                            忘记密码
                        </div>
                    </div>
                </div>
                <button className="btn btn-login cursor-point" type="submit">
                    登录
                </button>
            </form>
        </div>
    );
}

export default Login;
